<!--
 * @Author: 李天惊 uf_lee@163.com
 * @Date: 2022-10-11 13:32:23
 * @LastEditors: 李天惊 uf_lee@163.com
 * @LastEditTime: 2025-03-24 14:30:13
 * @FilePath: \global-brain\global-brain-admin\src\components\Upload\src\Upload.vue
 * Copyright (c) 2022 by 李天惊 uf_lee@163.com, All Rights Reserved. 
-->
<script setup lang="ts">
import { ref, watch, reactive } from 'vue'
import { ElMessageBox } from 'element-plus'
import { propTypes } from '@/utils/propTypes'
import { ElUpload } from 'element-plus'
import { Dialog } from '@/components/Dialog'
import type { UploadProps } from 'element-plus'
import emitter from '@/views/AAA/emitter'
import { useAppStore } from '@/store/modules/app'
const appStore = useAppStore()
let url: any = reactive({
  imageUrl: ''
})
const props = defineProps({
  modelValue: propTypes.string.def(''),
  modelData: propTypes.object.def({})
})
url.imageUrl = ref<string>(props.modelValue)
// const imageUrl = ref<string>(props.modelValue)

watch(
  () => props.modelValue,
  (val: string) => {
    if (val === url.imageUrl) return
    url.imageUrl = val
  }
)
const emit = defineEmits(['update:modelValue', 'change', 'del', 'modelData'])

const dialog = ref(false)
// const newData = ref(props.modelData)
const handleAvatarSuccess: UploadProps['onSuccess'] = (response) => {
  if (response.code == '200') {
    url.imageUrl = response.data.file_url
    emit('update:modelValue', response.data.file_url)
    emit('change', response.data)
    emit('modelData', response.data)
    console.log(response.data, 'response.data22')
  } else {
    ElMessageBox.alert(response.msg, '上传失败')
  }
}
const onDialog = () => {
  dialog.value = true
}
const onDel = () => {
  url.imageUrl = ''
  emit('update:modelValue', '')
  emit('del', {})
}
let www = ref(false)

emitter.on('orchuan', (a) => {
  if (a == '修改') {
    www.value = false
  } else if (a == '初始') {
    www.value = true
  } else if (a == '取消') {
    www.value = true
  } else if (a == '保存') {
    www.value = true
  }
})
</script>

<template>
  <!-- {{ newData }} -->
  <div>
    <ElUpload
      class="avatar-uploader"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :action="appStore.getUploadUrl"
      :disabled="www"
    >
      <div v-if="url.imageUrl" class="el-upload-list--picture-card">
        <img class="el-upload-list__item-thumbnail avatar" :src="url.imageUrl" alt="" />
        <span class="el-upload-list__item-actions">
          <span class="el-upload-list__item-preview">
            <Icon icon="ep:zoom-in" @click.stop="onDialog" />
          </span>
          <span class="el-upload-list__item-preview">
            <Icon icon="ep:delete" @click.stop="onDel" />
          </span>
        </span>
      </div>
      <Icon v-else icon="carbon:add" class="avatar-uploader-icon" :size="28" />
    </ElUpload>
    <Dialog v-model="dialog" title="图片展示">
      <img w-full :src="url.imageUrl" alt="Preview Image" />
    </Dialog>
  </div>
</template>
